<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="个人" name="个人"></el-tab-pane>
    <el-tab-pane label="企业" name="企业"></el-tab-pane>
  </el-tabs>
  <!-- <el-input
    placeholder="审核状态"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input> -->
  <el-input
    placeholder="签约人"
    class="search"
    suffix-icon="el-icon-search"
    v-model="user_id"
  ></el-input>
  <!-- <el-input
    placeholder="手机号"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input> -->
  <el-select class="search" v-model="value" placeholder="请选择">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item"
      :value="index"
    ></el-option>
  </el-select>
  <el-button type="primary" @click="search">查询</el-button>
  <el-button @click="reset">重置</el-button>
  <el-button @click="newContract">新建合同</el-button>
  <el-table
    :data="contract.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    height="540"
    style="width: 100%; text-align: center"
  >
    <!-- <el-table-column type="selection"></el-table-column> -->
    <el-table-column
      prop="contractNumber"
      label="合同编号"
      width="150"
    ></el-table-column>
    <el-table-column prop="contractType" label="合同类型"></el-table-column>
    <el-table-column prop="startTime" label="签订日期"></el-table-column>
    <el-table-column
      width="100"
      v-if="activeName == '个人'"
      prop="userId"
      label="签订人"
    ></el-table-column>
    <el-table-column
      width="100"
      v-else
      prop="enterId"
      label="法人"
    ></el-table-column>
    <el-table-column
      v-if="activeName == '个人'"
      width="170"
      prop="contractNumber"
      label="身份证号码"
    ></el-table-column>
    <el-table-column
      v-else
      width="170"
      prop="contractNumber"
      label="签订企业"
    ></el-table-column>
    <el-table-column prop="endTime" label="到期时间"></el-table-column>
    <el-table-column label="合同状态">
      <template #default="scope">
        <div v-if="scope.row.status == 0">
          <el-button size="small" type="warning">待签约</el-button>
        </div>
        <div v-else-if="scope.row.status == 1">
          <el-button size="small" type="success">已签约</el-button>
        </div>
        <div v-else>
          <el-button size="small" type="danger">已终止</el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="updateDate" label="更新时间"></el-table-column>
    <el-table-column fixed="right" align="center" label="操作" min-width="250">
      <template #default="scope">
        <el-span
          style="font-size: 12px; color: #2561ef"
          @click="check(scope.row)"
        >
          查看
        </el-span>
        &emsp;
        <el-span
          v-if="scope.row.staut == '生效中'"
          @click="dialogFormVisible = true"
          style="font-size: 12px; color: #2561ef"
        >
          物业交割
        </el-span>
        &emsp;
        <el-span
          v-if="scope.row.staut == '生效中'"
          @click="dialogFormVisible1 = true"
          style="font-size: 12px; color: #2561ef"
        >
          终止合同
        </el-span>
        &emsp;
        <el-span
          v-if="scope.row.staut == '待签订'"
          style="font-size: 12px; color: #2561ef"
        >
          续租
        </el-span>
        &emsp;
        <el-span
          v-if="scope.row.staut == '生效中'"
          @click="dialogFormVisible2 = true"
          style="font-size: 12px; color: #2561ef"
        >
          退租
        </el-span>
        &emsp;
        <el-span
          style="font-size: 12px; color: #2561ef"
          @click="deleterow(scope.row)"
        >
          删除
        </el-span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 30]"
    :size="default"
    :disabled="disabled"
    :background="background"
    layout="total, prev, pager, next,sizes"
    :total="contract.length"
  />
  <el-dialog v-model="dialogFormVisible" title="物业交割" :width="450">
    <el-form style="padding: 20px">
      <el-form-item label="房屋编号" label-width="formLabelWidth">
        <el-input autocomplete="off" />
      </el-form-item>
      <el-form-item label="水表拍照" :label-width="formLabelWidth">
        <el-button size="small">点击上传</el-button>
        <p style="font-size: 12px">只能上传jpg/png文件，且不超过1MB</p>
      </el-form-item>
      <el-form-item label="电表拍照" :label-width="formLabelWidth">
        <el-button size="small">点击上传</el-button>
        <p style="font-size: 12px">只能上传jpg/png文件，且不超过1MB</p>
      </el-form-item>
      <el-form-item label="房屋拍照" :label-width="formLabelWidth">
        <el-button size="small">点击上传</el-button>
        <p style="font-size: 12px">只能上传jpg/png文件，且不超过1MB</p>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          发送
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible1" title="终止合同" :width="450">
    <el-form style="padding: 20px">
      <el-form-item label="终止原因" label-width="formLabelWidth">
        <el-input autocomplete="off" />
      </el-form-item>
      <el-form-item label="终止时间" :label-width="formLabelWidth">
        <el-input type="date" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false">
          发送
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible2" title="退租" :width="450">
    <el-form style="padding: 20px">
      <el-form-item label="房间状态" label-width="formLabelWidth">
        <el-input autocomplete="off" />
      </el-form-item>
      <el-form-item label="终止时间" :label-width="formLabelWidth">
        <el-button size="small">+上传附件</el-button>
        <p style="font-size: 12px">文件大小不超过10MB</p>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">
          发送
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- @size-change="handleSizeChange"
    @current-change="handleCurrentChange" -->
</template>
<script setup>
import { selectContract, deleteContract } from '@/api/contract'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const dialogFormVisible2 = ref(false)
var activeName = ref('个人')
// const radiobtn = ref(0)
var pageSize = ref(5)
var currentPage = ref(1)
var router = useRouter()
const options = reactive(['待签订', '已签订', '已终止'])
var contract = ref([])
var value = ref()
var user_id = ref()
var result = ref(false)
var rowData = reactive()
// var rowUser = reactive()
// var rowHourses = reactive()
// var rowApartment = reactive()
onMounted(async () => {
  contract.value = (await selectContract(value.value, user_id.value)).data
  // console.log("login");
  // console.log(contract.value)
})
function newContract() {
  router.push({ path: '/cManagement/NewContract' })
}
function check(row) {
  rowData = JSON.stringify(row)
  router.push({ path: '/cManagement/CheckAlready', query: { rowData } })
}
async function search() {
  contract.value = (await selectContract(value.value, user_id.value)).data
}
async function deleterow(row) {
  ElMessageBox.confirm('确定删除吗？', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    result.value = (await deleteContract(row.contractId)).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '删除成功',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
      })
    }
  })
}
function reset() {
  value.value = null
  user_id.value = null
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
.el-table__body tr:hover > td {
  background-color: #d7eff6 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
</style>
